<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{ msg }}</h1>
    <Father></Father>
</div>
</body>

<script src="lib/vue.js"></script>

<script type="text/javascript">
    /*1. 定义 父子组件: 父子嵌套是指的是 把子组件放置在父组件的 template里面 */

    /*父子通信的时候，如果父组件要把数据给到子组件，则通过给子组件做属性绑定，然后在传递即可*/
    Vue.component('Father', {
        data() {
            return {
                money: 1000
            }
        },
        template: `
            <div>
            <h2>我是父组件</h2>
            <Son :n="money"></Son>
            <Son></Son>
</div>
        `
    });

    Vue.component('Son', {
        // 方式1定义属性
        // props: ['n'], // 用于定义接受父组件的数据的属性

        // 方式2定义属性
        // https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E7%B1%BB%E5%9E%8B


        // 种心锚
        // 《满城尽带黄金甲》周润发说的那句话：我给你的那叫给，我不给你的，你不能抢。

        props: {
            n: {
                type: Number,
                required: true,
                // default: 0,
                default: () => {
                    return 10
                },// 默认值
            }
        },
        data() {
            return {
                qian: 10
            }
        },
        template: `
            <div>
            <h3>我是子组件</h3>
            <p>{{ n }}</p>
</div>
        `
    });


    new Vue({
        el: '#app',
        data: {
            msg: '父子通信'
        }
    })

</script>

</html>
